<template>
    <div class="card-ctrl">
      <van-icon size="20" name="share-o" />
      <div class="card-count">
        <van-icon size="20" name="chat-o" /><span v-if="answer">{{ answer}}</span>
      </div>
     <div class="card-count" :class="{active:isPraise}" @click="getUp"> 
      <van-icon size="20" name="good-job-o" /><span >{{ praise}}</span>
     </div>
     </div>

</template>
<script setup lang="ts">
import { findStore } from '../stores/findStore/find'
import {storeToRefs} from 'pinia';
import { ref, onMounted, toRef, toRefs } from 'vue'
import {contentM} from '../typings'
const props = defineProps(["answer_num", 'praise_num','my_up','id']);
const answer = ref<number>();
const praise = ref<(number|string)>();
answer.value = Number(props.answer_num);
praise.value = props.praise_num;
const upStore = findStore();
const { myUpList } = storeToRefs(upStore);
const isPraise = ref<boolean>(false);
// const up = ref<contentM>();
const curid = ref<(number | string)>();
// up.value = props.my_up 
curid.value = props.id;

onMounted(() => {
  // let list = JSON.parse(localStorage.getItem('myUpList')) || [];

  getfirst();
  // isPraise.value = list.some((item) => {
  //   console.log("加入过？");
    
  //   if (item.q_id) {
  //     return Number(item?.q_id) === Number(curid.value);
  //   } else {
  //     return Number(item?.id) === Number(curid.value);
  //   }
  // });

  // if (isPraise.value) {
  //   if (!isNaN(props.praise_num) && !String(props.praise_num).includes('w')) {
  //     praise.value = Number(praise.value) + 1;
  //     console.log("加？",praise.value);
      
  //   }
  // }
  
})
const getfirst = () => {
  let list = JSON.parse(localStorage.getItem('myUpList')) || [];
  isPraise.value = list.some((item) => {
    if (item.q_id) {
      return Number(item.q_id) === Number(curid.value);
    } else {

      return Number(item.id) === Number(curid.value);
    }
  });

  

  if (isPraise.value) {

    
    if (!isNaN(props.praise_num) && !String(props.praise_num).includes('w')) {
      praise.value = Number(praise.value) + 1;
      
    }
  }
}
const getUp = () => {
  isPraise.value = !isPraise.value;
  if (!isNaN(props.praise_num) && !String(props.praise_num).includes('w')) {
    praise.value = Number(praise.value);
    if (isPraise.value) {
      praise.value = praise.value + 1;
    } else  {
      praise.value = praise.value - 1;
      }
    }
    
  if (isPraise.value) {
      myUpList.value = myUpList.value.filter((item) => {
        return item !== props.my_up;
      });
      myUpList.value = [...myUpList.value, props.my_up];
      localStorage.setItem('myUpList', JSON.stringify(myUpList.value));
    } else {
      myUpList.value = myUpList.value.filter((item) => {
        return item !== props.my_up;
      });
      localStorage.setItem('myUpList', JSON.stringify(myUpList.value));
  }

  
}

</script>

<style lang="scss" scoped>
.card-ctrl {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #757575;

}
.card-ctrl span {
   font-size: 12.4px;
   margin-left: 3px;
}
.card-count {
  // display: flex;
  // align-items: center;
  position: relative;
  span {
    position: absolute;
    top: .3rem;
    left: 1.1rem;
  }
  &.active {
    color: #ff5528;
  }
}
</style>